<template>
    <div class="complain-page">
        <!-- 顶部导航 -->

        <TopNav
                title="银行卡详情"
                :showBack="true"
                :showAdd="false"
        />

        <div class="bank-page">
            <!-- 银行卡信息 -->
            <div class="bank-card">
                <div class="bank-info">
                    <span class="card-type">{{ bankInfo.bankCode }}</span>
                    <span class="bank-name" style="margin-left: 10px">{{ bankInfo.bankName }}</span>
                </div>
                <div class="card-number">
                    {{ showFullCard ? bankInfo.cardNumber : maskCardNumber(bankInfo.cardNumber) }}
                    <button class="btn-full" @click="toggleCardNumber"> {{ showFullCard ? '隐藏卡号' : '完整卡号' }}</button>
                </div>
                <div class="bank-card-type">{{ bankInfo.cardType || '储蓄卡' }}</div>
            </div>

            <!-- 功能菜单 -->
           <!-- <div class="menu">
                <div class="menu-item" v-for="item in menu" :key="item.text">
                    <span>{{ item.text }}</span>
                    <span class="arrow">›</span>
                </div>
            </div>-->


        </div>


    </div>
</template>

<script>
    import TopNav from "@/components/TopNav.vue";
    import {getBankDetail} from '@/api/index.js'
    import {useRoute} from 'vue-router';

    export default {
        name: "BankDetailPage",
        components: {
            TopNav // 注册
        },
        data() {
            return {
                showFullCard: false,
                bankInfo: {},
                menu: [
                    {text: "余额查询"},
                    {text: "交易明细"},
                    {text: "支付限额查询"}
                ]
            }
        },
        methods: {
            maskCardNumber(number) {
                if(!number) return '';
                const last4 = number.slice(-4);
                return "****  ****  ****  " + last4;
            },
            async getBankDetail(bankId) {
                const res = await getBankDetail(bankId);
                if (res.code == 200) {
                    this.bankInfo = res.data;
                }
            },
            toggleCardNumber() {
                this.showFullCard = !this.showFullCard;
            }
        },
        mounted() {
            const route = useRoute();
            let bankId = route.query.bankId;
            this.bankId = bankId;
            this.getBankDetail(bankId);
        }
    };
</script>

<style scoped>
    .complain-page {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        background-color: #f5f5f5;
        min-height: 100vh;
    }

    .bank-page {
        background: #fff;
        min-height: 100vh;
        padding: 16px;
        box-sizing: border-box;
    }

    .bank-card {
        background: linear-gradient(135deg, #4a90e2, #50aee5);
        border-radius: 12px;
        color: #fff;
        padding: 20px;
        margin-bottom: 20px;
        position: relative;
    }

    .bank-info {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .card-number {
        font-size: 18px;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .btn-full {
        background: rgba(255, 255, 255, 0.3);
        border: none;
        padding: 4px 8px;
        border-radius: 6px;
        color: #fff;
        font-size: 14px;
    }

    .menu {
        background: #fff;
    }

    .menu-item {
        display: flex;
        justify-content: space-between;
        padding: 14px 0;
        border-bottom: 1px solid #f2f2f2;
        font-size: 16px;
    }

    .arrow {
        color: #ccc;
    }

    .footer {
        margin-top: 40px;
        text-align: center;
        font-size: 14px;
        color: #666;
    }

    .footer .tip {
        margin-top: 8px;
        font-size: 12px;
        color: #999;
    }

    .bank-card-type {
        font-size: 12px;
        color: #fff;
    }

</style>
